<template>
  <view class="more-filter u-border-top">
    <view class="more-list" v-if="!activeFilter">
      <view
        class="more-item is-link u-border-bottom"
        v-for="(item, index) in moreList"
        :key="index"
        @click="handleMore(item)"
      >
        <text class="mi-label">{{ item.label }}</text>
        <text :class="['mi-name', { placeholder: !form[item.propLabel] }]">{{
          form[item.propLabel] || "请选择"
        }}</text>
      </view>
    </view>
    <scroll-view class="more-child" scroll-y="true" v-else>
      <view
        :class="[
          'child-item u-border-bottom',
          { active: item.value === activeFilterData.activeItem },
        ]"
        v-for="(item, index) in activeFilterData.data"
        :key="index"
        @click="handleOpt(item)"
      >
        {{ item.label }}
        <u-icon
          name="checkbox-mark"
          size="32"
          v-if="item.value === activeFilterData.activeItem"
        ></u-icon>
      </view>
    </scroll-view>
    <view class="mi-opt">
      <u-button class="mo-btn" v-if="!activeFilter" @click="handleReset"
        >重置</u-button
      >
      <u-button
        class="mo-btn"
        type="primary"
        v-if="!activeFilter"
        @click="handleFilter"
        >确定</u-button
      >
      <u-button
        :hair-line="false"
        :custom-style="customStyle"
        class="mo-btn return"
        v-else
        @click="activeFilter = ''"
        >返回</u-button
      >
    </view>
  </view>
</template>

<script>
import { expList, publishList, eduList, typeList } from "@/utils/data";
export default {
  props: {
    isMachine: Boolean,
  },
  data() {
    return {
      activeFilter: "",
      isFilter: false,
      form: {},
      moreList: [
        {
          label: "工作年限",
          prop: "exp",
          propLabel: "expLabel",
          data: expList,
        },
        {
          label: "更新时间",
          prop: "time",
          propLabel: "timeLabel",
          data: publishList,
        },
        {
          label: "学历要求",
          prop: "edu",
          propLabel: "eduLabel",
          data: eduList,
        },
        {
          label: "工作性质",
          prop: "type",
          propLabel: "typeLabel",
          data: typeList,
        },
      ],
      customStyle: {
        backgroundColor: "#E9ECEF",
        border: "none",
        color: "#555555",
      },
    };
  },
  computed: {
    activeFilterData() {
      return this.moreList.find((ele) => ele.prop === this.activeFilter);
    },
  },
  watch: {
    isMachine(newVal) {
      if(newVal) {
        this.moreList.splice(0, 1);
      }
    },
  },
  methods: {
    handleMore(item) {
      this.activeFilter = item.prop;
    },
    handleOpt(item) {
      let filter = this.moreList.find((ele) => ele.prop === this.activeFilter);
      let filterIdx = this.moreList.findIndex(
        (ele) => ele.prop === this.activeFilter
      );
      this.$set(this.form, filter.prop, item.value);
      this.$set(this.form, filter.propLabel, item.label);
      this.$set(this.moreList[filterIdx], "activeItem", item.value);
      this.activeFilter = "";
    },
    handleFilter() {
      let form = {};
      for (let key in this.form) {
        if (key.indexOf("Label") < 0) {
          form[key] = this.form[key];
        }
      }
      this.$emit("filter", form);
    },
    handleReset() {
      this.moreList = [
        {
          label: "工作年限",
          prop: "exp",
          propLabel: "expLabel",
          data: expList,
        },
        {
          label: "更新时间",
          prop: "time",
          propLabel: "timeLabel",
          data: publishList,
        },
        {
          label: "学历要求",
          prop: "edu",
          propLabel: "eduLabel",
          data: eduList,
        },
        {
          label: "工作性质",
          prop: "type",
          propLabel: "typeLabel",
          data: typeList,
        },
      ];
      if(this.isMachine) {
        this.moreList.splice(0, 1);
      }
      this.form = {};
      this.$emit("reset");
    },
  },
};
</script>

<style lang="scss">
$img-base-dresume: $img-base + "dresume/";
.more-filter {
  background: $uni-bg-color;
  .scroll-list {
    height: 100%;
  }
  .more-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26rpx 32rpx;
    font-size: $uni-font-size-base;
    line-height: 54rpx;
    color: $uni-text-color-555;
    box-sizing: border-box;
    &.is-link {
      position: relative;
      padding: 26rpx 72rpx 26rpx 32rpx;
      .placeholder {
        color: $uni-text-color-placeholder;
      }
      &::before {
        content: "";
        display: block;
        position: absolute;
        right: 32rpx;
        top: 50%;
        margin-top: -16rpx;
        width: 32rpx;
        height: 32rpx;
        background-image: url($img-base-dresume + "picker.png");
        background-size: 100% 100%;
      }
    }
  }
  .more-child {
    max-height: calc(60vh - 128rpx);
    overflow: auto;
    .child-item {
      padding: 26rpx 32rpx;
      font-size: $uni-font-size-base;
      line-height: 54rpx;
      color: $uni-text-color-555;
      box-sizing: border-box;
      &.active {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: $u-type-primary;
      }
    }
  }
  .mi-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 32rpx;
    .mo-btn:not(.return) {
      margin: 0;
      width: calc(50% - 12rpx);
    }
    .return {
      flex-grow: 1;
    }
  }
}
</style>
